<template>
  <Table :columns="finalColumns" :data="data" class="c-template-table">
    <template v-for="(col,colIndex) in singleColumns" #[col.slot]="{ row,index }">
      <cli-cell :value="tools.lodash.get(row,col.key)" :config="col.config" @change="change($event,index,col.key)"></cli-cell>
    </template>
  </Table>
</template>

<script>
import cliCell from "./cli-cell";
export default {
  name: "cli-table",
  components: {cliCell},
  props:{
    columns:{
      type:Array
    },
    parentColumns:{
      type:Array
    },
    data:{
      type:Array
    },
    isParentColumns:{
      type:Boolean
    }
  },
  data(){
    return {
      /*columns:[
        {
          title:'abc1',
          slot:'values.abc1',
          config:{
            type:'text'
          }
        },
        {
          title:'abc1',
          slot:'values.abc2',
          config:{
            type:'text'
          }
        },
      ],
      data:[
        {
          type:'crawMaterial',
          className:'bill',
          values:{
            abc1:'abc1111',
            abc2:'abc2'
          }
        },
        {
          type:'crawMaterial',
          className:'bill',
          values:{
            abc1:'abc1',
            abc2:'abc2'
          }
        }
      ]*/
    }
  },
  computed:{
    singleColumns(){
      let columns=this.tools.lodash.cloneDeep(this.columns);
      columns.map((item,i)=>{
        item['slot']=''+i;
      })
      return columns;
    },
    finalColumns(){
      if(this.isParentColumns){
        let parentColumns=this.tools.lodash.cloneDeep(this.parentColumns);
        parentColumns.map(item=>{
          let children=this.singleColumns.filter(c=>item.children.includes(c.key));
          item.children=children;
        });
        return parentColumns
      }else {
        return this.singleColumns;
      }
    }
  },
  methods:{
    change(value,index,path){
      this.tools.lodash.set(this.data,index+'.'+path,value)
    }
  }
}
</script>

<style scoped lang="less">
.c-template-table {
  /deep/ .ivu-table-overflowX {
      overflow-x: hidden;
  }
}
</style>
